<template>
<div> v-bing指令</div>
<a v-bind:href="url" :title="tit">{{msg}}</a>
<p :class="{active:isActive}">绑定class属性</p>
<p :style="{backgroundColor:TextC,fontSize: fontS + 'px'}">绑定style对象语法</p>
<p :style="{style1,style2}">绑定style 数组语法</p>
</template>
<script setup>
import { reactive, ref } from "vue";
let url = ref("http://www.baidu.com");
let msg = ref("百度首页");
let tit = ref("鼠标点击百度首页");
let isActive = ref(false);
let TextC = ref("blue");
let fontS = ref(20);
let style1 = reactive({
  backgroundColor: "yellow",
  padding: "30px",
});
let style2 = {
  color: "red",
  fontSize: "30px",
  border: "1px solid orange",
};
setTimeout(() => {
  url.value = "https://jdgdxt.imtcme.edu.cn/classroom/classroom?id=1378&type=modify&statuss=3#KQGL";
  msg.value = "工单课堂";
  tit.value = "鼠标点击工单课堂";
  isActive.value = true;
  TextC.value= "red";
  fontS.value = 30;
  style1.backgroundColor="purple";
  style1.padding="80ppx"
}, 5000);
</script>
<style>
.active {
  background-color: beige;
}
</style>